mui.init()
/******		初始化滚动区域	********/
mui('.content').scroll({
	indicators: false,
	startY: 0 //初始化时滚动至y
});
/*****		封装进度条计算		*******/
let percent = (...arr) => {
	return 100 - (arr[0] / arr[1] * 100).toFixed(2)
}

/******		设置当前页面为正在进行中	********/
let times = [4, 8, 12, 16, 20, 24]			
let time = new Countdown(times) //这是整点秒杀时间 每隔4个小时刷新一次
let hour = time.comparison()

/*******	获取整点时间的下标	*********/
let index = hour => {
	return times.indexOf(hour)
}


/*******	横向滚动	********/
let init_data = i => {
	/*******	填充横向滚动内容		*******/
	let html = ''
	$.each(times,(idx,v)=>{
		let h = v<10 ? '0'+v : v
		if(idx==i){
			html += `<span class="mui-control-item mui-active" data-current="true">${h}:00<span>进行中</span></span>`
		}else if(idx<i){
			html += `<span class="mui-control-item" data-current="false">${h}:00<span>已结束</span></span>`
		}else{
			html += `<span class="mui-control-item" data-current="false">${h}:00<span>未开始</span></span>`
		}
	})
	$('.scroll .mui-scroll').empty().append(html)
	mui('.scroll').scroll({
		startX: $('.scroll .mui-scroll .mui-active').position().left //初始化时滚动至x
	})
	/*****		点击未开始和已结束弹出提示		*********/
	$('.scroll .mui-scroll .mui-control-item').click(function(){
		if(!$(this).data('current')){
			mui.toast(`${$(this).text()}`)
			init_data(index(hour))
		}
	})
}

/********	初始化滚动条	*********/
init_data(index(hour))
/******获取整点的数据******/
let get_data = hour => {
	$.ajax({
		type: "get",
		url: `./test_data/countdown_data${hour}.json`,
		async: true,
		success(data) {
			html = ''
			for(let v of data) {
				html += `
						<li class="mui-table-view-cell mui-media">
							<a href="goods_detail.html#${v.id}">
								<img class="mui-media-object mui-pull-left" src="${v.img_url}">
								<div class="mui-media-body">
									<div class="mui-ellipsis-2">${v.good_name}</div>
									<div class="ctn-bottom">
										<div>
											<p>￥ ${v.new_price}</p>
											<s>￥ ${v.price}</s>
										</div>
										<div class="ctn-right">
											<div>剩余：${v.remaining} </div>
											<div class="mui-progressbar" data-remaining='${v.remaining}' data-stock='${v.stock}'>
												<span></span>
											</div>
										</div>
									</div>
								</div>
							</a>
						</li>`
				
			}
			$('.goods').empty().html(html)
			//初始化进度条
			mui(".mui-progressbar").each(function() {
			let remaining = $(this).data('remaining')
			let stock = $(this).data('stock')
				mui(this).progressbar({
					progress: percent(remaining, stock)
				}).show();
			})
		},
		error(err) {
			console.log(err.statusText)
		}
	});
}
get_data(hour)
/*****		倒计时更新数据	*********/
setInterval(() => {
	let date = time.get()
	$('.h').html(date.h)
	$('.m').html(date.m)
	$('.s').html(date.s)
	let new_hour = time.comparison()
	if(hour != new_hour) {
		init_data(index(new_hour))
		get_data(hour)
	}
}, 500);
